import React, { PureComponent, PropTypes } from 'react';
import Swipeable from 'react-swipeable';
import { Loading } from 'components';
import style from './list.css';

class List extends PureComponent {
  static propTypes = {
    fetching: PropTypes.bool.isRequired,
    items: PropTypes.arrayOf(PropTypes.object).isRequired,
    fetchLists: PropTypes.func.isRequired,
  }

  static shareItems = [
    {
      href: 'ww.baidu.com',
      svgId: '#share',
      text: '微信分享',
    },
    {
      href: 'ww.baidu.com',
      svgId: '#share',
      text: '朋友圈',
    },
    {
      href: 'ww.baidu.com',
      svgId: '#share',
      text: 'QQ',
    },
    {
      href: 'ww.baidu.com',
      svgId: '#share',
      text: 'QQ空间',
    },
  ]

  constructor(props) {
    super(props);
    this.state = {
      open: [],
      active: false,
      shareId: '',
    };
  }

  componentWillMount() {
    const { fetchLists } = this.props;
    fetchLists(0);
  }

  // 展开
  openItem = (index) => {
    const { open } = this.state;
    const arr = [];
    const length = Math.max(open.length, index);
    for (let i = 0; i <= length; i += 1) {
      arr[i] = open[i];
      if (i === index) {
        arr[i] = !open[i];
      }
    }
    this.setState({
      open: arr,
    });
  }

  onSwipedDown = () => {
    const { fetchLists } = this.props;
    fetchLists();
  }

  // 显示分享模块
  showModal = (shareId) => {
    this.setState({
      shareId,
      active: true,
    });
  }

  // 隐藏分享模块
  hideModal = () => {
    this.setState({
      active: false,
    });
  }


  render() {
    const { fetching, items } = this.props;
    const { open, active, shareId } = this.state;

    return (
      <div className={style.main}>
        <Swipeable
          nodeName="div" className={style.down}
          onSwipedDown={this.onSwipedDown}
        >
          <svg className={style.downSvg}><use xlinkHref="#down" /></svg>
        </Swipeable>

        <ul className={style.list}>
          {
            items.map((list, index) => (
              <li className={style.listItem} key={list.id}>
                <time className={style.time}>{list.createdAtM.slice(-8, -3)}</time>
                <article
                  className={style.text}
                >
                  {open[index] ? list.contentHtml : list.title}
                </article>
                <div className={style.btns}>
                  <button
                    className={list.contentHtml === list.title ? style.hidden : style.open}
                    onClick={() => this.openItem(index)}
                  >
                    {open[index] ? '收起' : '展开'}
                  </button>
                  <button
                    className={style.share}
                    onClick={() => this.showModal(list.id)}
                  >
                    <svg className={style.svg}><use xlinkHref="#share" /></svg>
                  </button>
                </div>
              </li>
            ))
          }
        </ul>

        {/* eslint-disable jsx-a11y/no-static-element-interactions*/}
        <div
          className={active ? style.modalActive : style.modal}
          onClick={this.hideModal}
        >
          <ul className={style.shareList} data-shareId={shareId}>
            {
              List.shareItems.map(({ href, svgId, text }) => (
                <li key={text}>
                  <a className={style.shareLink} href={href}>
                    <svg className={style.shareIcon}><use xlinkHref={svgId} /></svg>
                    <div className={style.shareFont}>{text}</div>
                  </a>
                </li>
              ))
            }
          </ul>

          <button
            className={style.shareBtn} type="button"
            onClick={this.hideModal}
          >取 消</button>
        </div>

        <Loading active={fetching} />
      </div>
    );
  }
}

export default List;
